<template>
	<view class="edit_ed">
		<view class="box_conten">
			<view class="logo_pic">
				<view class="tit_text">设置新密码</view>
			</view>
			<view class="input_ediit" v-if="changePwd.type==2">
				<text>请输入{{store.getters.setProcessingTel}}的原密码</text>
				<uni-easyinput placeholderStyle="font-size:28rpx;" v-model="changePwd.oldPassword" type='password'
					placeholder="请输入原密码" @input="nextTick(()=>changePwd.oldPassword=pattern($event))"></uni-easyinput>
				<!-- <text>新密码</text> -->
				<uni-easyinput placeholderStyle="font-size:28rpx;"
					@input="nextTick(()=>changePwd.newPassword=pattern($event))" :clearable="false" type='password'
					v-model="changePwd.newPassword" placeholder="请输入新密码"></uni-easyinput>
			</view>
			<view class="input_ediit_code" v-else>
				<text>请输入{{store.getters.setProcessingTel}}收到的短信验证码</text>
				<view class="input_code">
					<uni-easyinput v-model="changePwd.code" placeholderStyle="font-size:28rpx;" :clearable="false"
						maxlength="6" type="number" placeholder="请输入短信验证码"></uni-easyinput>
					<view class="code_text" v-if="count==0" @click="getCode">
						获取验证码
					</view>
					<view class="code_text_" v-else>
						({{count}}s)后重新获取
					</view>
				</view>
				<!-- <text>新密码</text> -->
				<uni-easyinput :clearable="false" @input="nextTick(()=>changePwd.newPassword=pattern($event))"
					placeholderStyle="font-size:28rpx;" v-model="changePwd.newPassword" type='password'
					placeholder="请输入新密码"></uni-easyinput>
			</view>
			<view class="subtitle"  v-if="changePwd.type==2">
				<span @click="changeType(1)">验证码修改>></span>
			</view>
			<view class="subtitle"  v-else>
				<span @click="changeType(2)">无法获取验证码？使用密码修改>></span>
			</view>
			<view class="btn_edit">
				<button type="primary" class="onlogout" :class="{btn_bg:checkPwd(1)}" :disabled="checkPwd(2)"
					@click="changeNameImg">确认修改</button>
			</view>
		</view>

	</view>
</template>

<script setup lang="ts">
	import {
		ref,
		reactive,
		nextTick, onMounted
	} from "vue"
	import apiCode from '@/util/network_api/getcode.js'
	import apiUser from '@/util/network_api/user.js'
	import store from '@/store_network/index.js'
	import md5 from 'js-md5';
	const changePwd = reactive({
		"code": "", //验证码
		"newPassword": "", //新密码
		"oldPassword": "", //旧密码
		"phone": store.state.userInfo.phone, //手机号
		"type": 2 //更改密码类型：1-验证码改密，2-输入旧密码更改密码
	})
	const count = ref(0) //倒计时
	const clear = ref(null)
	const changeType = (val) => {
		changePwd.type = val
		changePwd.code = ''
		changePwd.newPassword = ''
		changePwd.oldPassword = ''
	}
	const navbarStatusHeight = ref(0)
	const navBarHeight = ref(0)
	const navBarWidth = ref(375)
	onMounted(() => {
		const info = uni.getSystemInfoSync()
		navbarStatusHeight.value = info.statusBarHeight
		// 根据微信小程序的右上侧的胶囊样式 设置导航栏内容的高度
		// 条件编译 以下三个不支持胶囊样式
		// #ifndef H5 || APP-PLUS || MP-ALIPAY
		const menuInfo = uni.getMenuButtonBoundingClientRect()
		// 导航栏内容的高度 = (胶囊底部的高度 - 状态栏的高度) + (胶囊顶部的高度 - 状态栏的高度)
		navBarHeight.value = (menuInfo.bottom - info.statusBarHeight) + (menuInfo.top - info.statusBarHeight)
		// 导航栏内容的宽度  除开胶囊按钮左侧的内容宽度
		navBarWidth.value = menuInfo.left
		// #endif
	})
	// 校验密码非中文
	const pattern = (v) => {
		return v.replace(/[\u4E00-\u9FA5\s]/g, '')
	}
	// 判断是否输入完整
	const checkPwd = (val) => {
		switch (val) {
			case 1:
				return changePwd.type == 2 ? (changePwd.newPassword && changePwd.oldPassword) : (changePwd.code
					.length == 6 && changePwd.newPassword)
			case 2:
				return changePwd.type == 2 ? !(changePwd.newPassword && changePwd.oldPassword) : !(changePwd.code
					.length == 6 && changePwd.newPassword)
			default:
				break;
		}
	}
	// 获取验证码
	const getCode = async () => {
		if (!/^1[^1^2]\d{9}$/.test(changePwd.phone)) {
			uni.showToast({
				title: '请输入正确的手机号!',
				position: 'top',
				icon: "none"
			});
			return;
		}
		count.value = 59
		clear.value = setInterval(() => {
			count.value -= 1
			if (count.value == 0) {
				clearInterval(clear.value)
			}
		}, 1000)
		await apiCode.updateCode({
			phone: changePwd.phone
		}).then(res => {
			if (res.code === 20000) {
				uni.showToast({
					title: res.message,
					icon: 'none',
					position: 'top',
				})
			}
		})
	}
	// 确认修改
	const changeNameImg = async () => {
		//显示加载框
		uni.showLoading({
			title: '加载中',
			mask: true
		});
		let data = JSON.parse(JSON.stringify(changePwd))
		data.newPassword = (md5 as any)(changePwd.newPassword)
		if (changePwd.type == 2) {
			data.oldPassword = (md5 as any)(changePwd.oldPassword)
		}
		await apiUser.updatePwd(data).then(res => {
			if (res.code == 20000) {
				uni.showToast({
					mask: true,
					title:`修改成功`,
					icon: "success"
				})
				setTimeout(()=>{
					uni.reLaunch({
						url: "/pages_network/user/user"
					})
				},800)
			}
		})
		//隐藏加载框
		uni.hideLoading();
	}
	const back = () => {
		uni.navigateBack()
	}
</script>

<style lang="scss">
	.edit_ed {
		width: 100%;
		// height: 100vh;
		// background-image: url('@/static/network/login/bg_login.png');
		// background-repeat: no-repeat;
		// background-size: cover;
		// background-position: top;

		.fixed {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 99;
			width: 100%;
			.navbar-content {
				position: relative;
				display: flex;
				align-items: center;
				width: 100%;
				height: 80rpx;
			
				.back_btn {
					margin-left: 24rpx;
					position: relative;
					z-index: 9;
				}
			
				.navBar {
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: center;
					position: absolute;
					top: 0;
					bottom: 0;
					width: 100%;
					height: 100%;
					font-size: 32rpx;
					font-weight: bold;
					color: #fff;
				}
			}
		}
		.box_conten {
			padding: 30rpx 0 0;

			.logo_pic {
				padding: 40rpx 60rpx;

				.tit_text {
					font-weight: bold;
				}
			}

			.input_ediit {
				margin: 0 60rpx;
				font-size: 28rpx;

				:deep(.is-input-border) {
					border-radius: 0 !important;
					background-color: transparent !important;
					margin: 20rpx 0;
					border: none;
					border-bottom: 1rpx solid #ccc;
					height: 90rpx;

					&.is-focused {

						.uniui-clear,
						.uniui-eye-filled {
							color: #007cff99 !important;
						}
					}

				}
			}

			.input_ediit_code {
				margin: 0 60rpx;
				font-size: 28rpx;

				:deep(.is-input-border) {
					background-color: transparent !important;
					margin: 20rpx 0;
					border: none;
					border-bottom: 1rpx solid #ccc;
					border-radius: 0 !important;
					height: 90rpx;

					&.is-focused {

						.uniui-clear,
						.uniui-eye-filled {
							color: #007cff99 !important;
						}
					}
				}

				.input_code {
					position: relative;

					.code_text {
						height: 30rpx;
						font-size: 28rpx;
						color: #007cff;
						position: absolute;
						top: calc(50% - 15rpx);
						right: 30rpx;
						z-index: 2;
					}

					.code_text_ {
						height: 30rpx;
						font-size: 28rpx;
						color: #999;
						position: absolute;
						top: calc(50% - 15rpx);
						right: 30rpx;
					}
				}

			}

			.subtitle {
				color: #007cff;
				font-size: 28rpx;
				text-align: right;
				margin: 0 60rpx;
				display: flex;
				justify-content: flex-end;
			}

			.btn_edit {
				position: absolute;
				margin: 60rpx auto;
				width: 100%;

				:deep(button:after) {
					border: none !important;
				}

				.onlogout {
					font-size: 28rpx;
					font-weight: bold;
					// padding: 0rpx 200rpx;
					margin: 0 60rpx;
					height: 80rpx;
					border-radius: 50rpx;
					line-height: 80rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: #007cff6b;
				}

				.btn_bg {
					background-color: #007cff;
				}
			}
		}

	}
</style>